<template>
	<view class="shop-page">
		<u-navbar title="积分商城" bgColor="transparent" leftIconColor="#ffffff" titleStyle="color:#ffffff;"
			:placeholder="true">
			<view slot="left"></view>
		</u-navbar>
		<view class="content-box">
			<view class="score-box">
				<view class="score-left">
					<view>积分</view>
					<view class="score">{{userInfo.all_score}}</view>
				</view>
				<view class="score-right">
					<view class="label" @click="navigatorPage('/pages/mine/scoreRecode')">收支/兑换记录</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="tab-list">
				<view :class="tabsIndex==index?'tab-item active':'tab-item'" v-for="(item,index) in tabsList"
					:key="index" @click="tabsChange(index)">{{item.name}}</view>
			</view>
			<view class="shop-list-box">
				<z-paging ref="paging" v-model="dataList" @query="queryList" :paging-style="{top:navTop+'px'}"
					:height="scrollViewHeight+'px'">
					<view class="shop-list">
						<view class="shop-item" v-for="(item,index) in dataList" :key="index">
							<image :src="item.image" class="goods-image"></image>
							<view class="goods-name">{{item.name}}</view>
							<view class="goods-price">{{item.price}}积分</view>
							<view class="goods-btn" @click="goodsBuy(item)">去兑换</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				userInfo: null,
				tabsList: [{
					type: 'goods',
					name: '商品列表',
				}, {
					type: 'courses',
					name: '课程列表',
				}],
				tabsIndex: 0,
				dataList: [],
				pageHeight: 0,
				navTop: 0,
				scrollViewHeight: 0,
			}
		},
		computed: mapGetters(["isLogin"]),
		onLoad() {
			let _self = this
			uni.getSystemInfo({
				success(res) {
					_self.windowHeight = res.windowHeight
					let view = uni.createSelectorQuery().select('.shop-list-box')
					view.boundingClientRect(data => {
						_self.navTop = data.top
						_self.scrollViewHeight = _self.windowHeight - data.top - 10
					}).exec()
				}
			})
		},
		onShow() {
			if (this.isLogin) {
				this.getUserInfo()
			}
		},
		methods: {
			//页面跳转
			navigatorPage(page, auth = true) {
				if (auth && !this.isLogin) {
					this.$Tips("/pages/login/login");
				} else {
					this.$Tips(page);
				}
			},
			//获取用户信息
			getUserInfo() {
				this.$Api.user.getUserInfo().then((res) => {
					this.userInfo = res.data.userinfo;
					this.$store.commit("UPDATE_USERINFO", res.data.userinfo);
				});
			},
			goodsBuy(item) {
				if (this.tabsIndex == 0) {
					this.navigatorPage('/pages/shop/goodsDetail?goods_id=' + item.id)
				} else {
					this.$Tips('/pages/courses/coursesDetail?courses_id=' + item.id)
				}
			},
			tabsChange(index) {
				this.tabsIndex = index
				this.refreshList()
			},
			refreshList() {
				this.dataList = []
				this.$refs.paging.scrollToTop()
				this.$refs.paging.refresh();
			},
			queryList(pageNo, pageSize) {
				if (this.tabsIndex == 0) {
					this.$Api.goods.getGoodsList({
						page: pageNo,
						limit: pageSize,
					}).then(res => {
						this.$refs.paging.complete(res.data.data);
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
				} else {
					this.$Api.courses.getCourseList({
						page: pageNo,
						limit: pageSize,
						type: '0',
					}).then(res => {
						this.$refs.paging.complete(res.data.data);
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-page {
		height: 100%;
		min-height: 100vh;
		background-image: url('https://oss.bigchun.com/xiangshang/uploads/20241224/e43133481f9fa90791cff1e1b8d289ad.png');
		background-size: 100% 100%;
		position: relative;

		.content-box {
			position: relative;
			z-index: 100;

			.score-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 30rpx;
				padding: 0 38rpx;
				height: 100rpx;
				background: #FEF9E8;
				border-radius: 16rpx;

				.score-left {
					display: flex;
					align-items: center;

					.score {
						font-size: 36rpx;
						color: #F84871;
						margin-left: 10rpx;
					}

				}

				.score-right {
					display: flex;
					align-items: center;

					.label {
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						margin-right: 10rpx;
					}

				}
			}

			.tab-list {
				min-height: 86rpx;
				margin: 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tab-item {
					text-align: center;
					width: 336rpx;
					height: 88rpx;
					line-height: 88rpx;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 16rpx;
					font-weight: bold;
					font-size: 32rpx;
					background: #FF7C9B;
					color: #ffffff;
				}

				.active {
					background: #FFFFFF;
					color: #F84871;
				}
			}

			.shop-list {
				margin: 20rpx 30rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;

				.shop-item {
					width: 336rpx;
					background: #FFFFFF;
					border-radius: 36rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					padding: 36rpx 30rpx 24rpx;
					text-align: center;
					font-size: 32rpx;

					.goods-image {
						width: 212rpx;
						height: 212rpx;
						margin-bottom: 10rpx;
					}

					.goods-name {
						text-align: left;
						font-weight: bold;
						margin-bottom: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.goods-price {
						text-align: left;
						font-weight: bold;
						color: #FD463E;
					}

					.goods-btn {
						color: #FFFFFF;
						height: 76rpx;
						text-align: center;
						line-height: 76rpx;
						background: linear-gradient(270deg, #FE4369 0%, #FE746D 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 70, 105, 0.3);
						border-radius: 200rpx;
						margin-top: 20rpx;
					}
				}
			}

		}

	}
</style>